<template>
    <div class="personHead">
        <div><span>用户权限</span></div>
    </div>
    <div class="permisstionMain">
        <div class="permissionMainLeft">
            <div class="upPart">
                <img src="/src/assets/img/Personal/普通用户.svg" class="upImg"/>
                <span class="upText">普通用户权限</span>
            </div>
            <div class="downPart">
                <span class="downText">权限范围</span>
                <ol class="downOl">
                    <li class="downLi">&nbsp;拥有个人专属工具箱</li>
                    <li class="downLi">&nbsp;创建公开或私有的个人项目，保存项目基本信息</li>
                    <li class="downLi">&nbsp;个人文件夹、项目文件夹</li>
                </ol>
            </div>
        </div>
        <div class="permissionMainRight">
            <div class="upPart">
                <img src="/src/assets/img/Personal/认证用户.svg" class="upImg"/>
                <span class="upText">认证用户权限</span>
            </div>
            <div class="downPart">
                <span class="downText">权限范围</span>
                <ol class="downOl">
                    <li class="downLi">&nbsp;具有普通用户的全部权限</li>
                    <li class="downLi">&nbsp;地理空间数据一张图，定制项目的专题地图</li>
                    <li class="downLi">&nbsp;使用用于水资源预测的GM、Markov算法</li>
                    <li class="downLi">&nbsp;使用用于水资源评估的评估算法</li>
                </ol>
            </div>
        </div>
    </div>

    <div class="statement">
        <div class="up">
            <span>帮助</span>
            <span>隐私</span>
            <span>条款</span>
        </div>
        <div class="down">
            <span>版权所有&nbsp;&nbsp;</span>
            <i class="iconfont icon-c-copy"></i>
            <span>中国矿业大学（北京）</span>
        </div>
    </div>

    <div class="currentAuth1" v-if="!isAuth">
        <img src="/src/assets/img/Personal/当前权限.svg" />
        <span class="currentAuth">当前权限</span>
    </div>
    <div class="currentAuth2" v-if="isAuth">
        <img src="/src/assets/img/Personal/当前权限.svg" />
        <span class="currentAuth">当前权限</span>
    </div>

    <div class="authBtn" v-if="!isAuth">
        <el-button type="primary" @click="auth">
            <span>邮箱认证</span>
        </el-button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isAuth:false,
        }
    },
    methods:{
        auth(){
            this.isAuth = !this.isAuth;
        },
    },
    components:{

    },
}
</script>

<style>
.personHead{
    height: 60px;
    border-bottom: 1px solid var(--el-border-color-lighter);
}
.personHead div{
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
}
.permisstionMain{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 40px;
}
.permissionMainLeft{
    width: 719px;
    height: 477px;
    /* border: 1px solid #eee; */
    box-shadow: var(--el-box-shadow-base);
}
.permissionMainRight{
    width: 719px;
    height: 477px;
    /* border: 1px solid #eee; */
    box-shadow: var(--el-box-shadow-base);
}
.upPart{
    width: 100%;
    height: 165px;
    border-bottom: 1px solid var(--el-border-color-base);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.upImg{
    width: 122px;
    height: 109px;
}
.upText{
    font-size: 24px;
    font-weight: bold;
}
.downPart{
    width: 100%;
    height: 311px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.downText{
    font-size: 20px;
    font-weight: bold;
    padding: 40px 450px 10px 10px;
}
.downOl{
    /* font-size: 16px; */
    margin: 20px 150px 40px 40px;
}
.downLi{
    height:30px
}
.authBtn{
    position: absolute;
    top: 565px;
    left: 1680px;
}
.authBtn span{
    font-size: 20px;
    font-weight: bold;
}
.currentAuth1{
    position: absolute;
    top: 188px;
    left: 286px;
    width: 145px;
    transform: rotate(315deg);
}
.currentAuth2{
    position: absolute;
    top: 188px;
    left: 1078px;
    width: 145px;
    transform: rotate(315deg);
}
.currentAuth{
    position: absolute;
    top: 10px;
    left: 50px;
    font-size: 14px;
    color: white;
}
.statement{
	position: absolute;
	top: 90%;
    left: 48%;
	height: 80px;
	font-size: 14px;
	color: rgb(0, 0, 0, 0.4);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.statement .up{
	width: 150px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-self: center;
}
.statement .down{
	margin-top: 10px;
	width: 300px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
</style>